import React from 'react';
import { Descriptions, Modal, Typography } from 'antd';
import { cloneDeep } from '@/utils/utils';

const { Paragraph } = Typography;

interface HehDescribeProps {
  visible: boolean;
  onCancel: (...args: any[]) => any;
  columns: any[];
  data: any;
}

const HehDescribe = (props: HehDescribeProps) => {
  let { visible, onCancel, columns, data } = props;
  let newColumns = cloneDeep(columns);
  newColumns.shift();
  newColumns.pop();
  return (
    <Modal
      title="详情"
      visible={visible}
      onCancel={onCancel}
      width={1024}
      footer={null}
    >
      <Descriptions bordered>
        {newColumns?.map((item: any) => (
          <Descriptions.Item key={item.dataIndex} label={item.title}>
            <Paragraph style={{ marginBottom: 0 }}>
              {item.render
                ? item.render(data[item.dataIndex])
                : data[item.dataIndex]}
            </Paragraph>
          </Descriptions.Item>
        ))}
      </Descriptions>
    </Modal>
  );
};

export default HehDescribe;
